 /*
 * @description: 商家物料详情
 * @Author: along
 * @Date: 2021-03-16
 * @Last Modified by: along
 * @Last Modified time: 2021-03-16
 */
<template>
    <div
        class="shopMaterielInfo"
        v-loading="loading"
    >
        <div v-if="JSON.stringify(formData) !== '{}'">
            <p class="title">商家物料清单</p>
            <div class="_nav">
                <div class="_nav_left">
                    <p
                        class="_nav_status"
                        :style="{color: formData.status == 1 ? 'rgba(255, 183, 38, 1)' : formData.status == 2 ? 'rgba(47, 189, 179, 1)' : formData.status == -1 ? 'rgba(249, 91, 86, 1)' : '#333'}"
                    >{{ formData.status | filterStatus }}</p>
                    <p
                        class="_nav_reson"
                        v-if="formData.status == 1"
                    >
                        商家已提交,请尽快审核～
                    </p>
                    <p
                        class="_nav_reson"
                        v-if="formData.status == 2"
                    >
                        该物料清单已经通过审核,可点击下方按钮进行导出、查看物流信息、修改
                    </p>
                    <p
                        class="_nav_reson"
                        v-if="formData.status == -1"
                    >
                        不通过原因: {{ formData.audit_reason | filterData }}
                    </p>
                </div>
                <div
                    class="_nav_right"
                    @click="$refs.materielRecord.show()"
                >
                    查看操作记录
                </div>
            </div>

            <!-- 基本信息 -->
            <div class="_wrap">
                <p class="_wrap_title">
                    基本信息
                </p>
                <div class="_item">
                    <div class="_item_info">
                        公司名称:
                        <p class="_item_content">
                            {{ formData.company_name | filterData }}
                        </p>
                    </div>
                    <div class="_item_info">
                        掌大商城店铺名称:
                        <p class="_item_content">
                            {{ formData.shop_title | filterData }}
                        </p>
                    </div>
                </div>
                <div class="_item">
                    <div class="_item_info">
                        联系人姓名:
                        <p class="_item_content">
                            {{ formData.contact_name | filterData }}
                        </p>
                    </div>
                    <div class="_item_info">
                        联系人电话:
                        <p class="_item_content">
                            {{ formData.contact_phone | filterData }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="_wrap padding12">
                <p class="_wrap_title">
                    基本信息
                </p>
                <div class="_item">
                    <div class="_item_info auto">
                        商品名称：
                        <p class="_item_content">
                            {{ formData.goods_title | filterData }}
                        </p>
                    </div>
                </div>
                <div class="_item">
                    <div class="_item_info">
                        商品ID：
                        <p class="_item_content">
                            {{ formData.goods_no | filterData }}
                        </p>
                    </div>
                    <div class="_item_info">
                        商品在其他平台(淘宝、京东)最低售价：
                        <p class="_item_content">
                            {{ formData.other_price }}元
                        </p>
                    </div><div class="_item_info">
                        商品在掌大售价/团购优惠：
                        <p class="_item_content">
                            {{ formData.price }}元
                        </p>
                    </div>
                </div>
                <div class="_item">
                    <div class="_item_info">
                        小样/福利/礼品数量：
                        <p class="_item_content">
                            {{ formData.gift_count }}件
                        </p>
                    </div>
                    <div class="_item_info">
                        商品正装数量：
                        <p class="_item_content">
                            {{ formData.goods_count }}件
                        </p>
                    </div>
                    <!-- 占位 -->
                    <div class="_item_info opacity0">
                        --
                        <p class="_item_content">
                            {{ '--' }}
                        </p>
                    </div>
                </div>
                <div class="_images">
                    <p class="_images_title">
                        商品主图:
                    </p>
                    <div class="_images_wrap">
                        <img
                            v-for="(option,index) in formData.goods_images"
                            :key="index"
                            :src="option"
                            class="_price"
                            @click="fnShowPreview(formData.goods_images)"
                        >
                    </div>
                </div>
            </div>

            <!-- 寄回信息 -->
            <div class="_wrap">
                <p class="_wrap_title">
                    寄回信息
                </p>
                <div class="_item">
                    <div class="_item_info">
                        是否需要寄回:
                        <p class="_item_content">
                            {{ formData.need_return === 1 ? '是' : '否' }}
                        </p>
                    </div>
                </div>
                <div
                    class="_item"
                    v-if="formData.need_return === 1"
                >
                    <div class="_item_info">
                        收件人姓名:
                        <p class="_item_content">
                            {{ formData.return_address_username | filterData }}
                        </p>
                    </div>
                    <div class="_item_info">
                        收件人电话:
                        <p class="_item_content">
                            {{ formData.return_address_phone | filterData }}
                        </p>
                    </div>
                    <div class="_item_info overflow">
                        收件地址:
                        <p class="_item_content">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :content="formData.return_address_info"
                                placement="top-start"
                            >
                                <el-button
                                    type="text"
                                    :style="{color: 'rgba(153, 153, 153, 1)'}"
                                >
                                    {{ formData.return_address_info | filterData }}
                                </el-button>
                            </el-tooltip>

                        </p>
                    </div>
                </div>
            </div>

            <!-- 推广要求 -->
            <div class="_wrap">
                <p class="_wrap_title">
                    推广要求
                </p>
                <div class="_item">
                    <div class="_item_info">
                        推广寝室数:
                        <p class="_item_content">
                            {{ formData.room_series_count }}间
                        </p>
                    </div>
                    <div class="_item_info">
                        男女寝室要求:
                        <p class="_item_content">
                            {{ formData.room_series_sex === 1 ? '男寝' : formData.room_series_sex === 2 ? '女寝' : '不限' }}
                        </p>
                    </div>
                </div>
                <div class="_side">
                    <p class="_side_title">
                        商品引导话术:
                    </p>
                    <div class="_side_content">
                        {{ formData.goods_guide_desc | filterData }}
                    </div>
                </div>
                <div class="_side">
                    <p class="_side_title">
                        商品常见FQA:
                    </p>
                    <div class="_side_content">
                        {{ formData.goods_faq | filterData }}
                    </div>
                </div>
                <div class="_side">
                    <p class="_side_title">
                        其他备注要求:
                    </p>
                    <div class="_side_content">
                        {{ formData.goods_requirement | filterData }}
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="_function">
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                    type="default"
                    @click="() => {
                        this.$router.push({
                            name: 'shopMateriel',
                            query: {
                                type: true
                            }
                        })
                    }"
                >
                    返回
                </el-button>
                <!-- 待审核 -->
                <el-button
                    v-if="formData.status === 1"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                    type="default"
                    @click="handleRefuseMateriel()"
                >
                    驳回
                </el-button>
                <!-- 待审核 -->
                <el-button
                    v-if="formData.status === 1"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                    type="primary"
                    @click="handleSuccessMateriel()"
                >
                    通过
                </el-button>
                <!-- 待审核/通过 -->
                <el-button
                    v-if="formData.status === 1 || formData.status === 2"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                    type="primary"
                    @click="handleChangeMateriel()"
                >
                    修改
                </el-button>
                <!-- 已通过 -->
                <el-button
                    v-if="(formData.status === 1 || formData.status === 2) && formData.tracking_status"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                    type="primary"
                    @click="handleCheckMateriellog()"
                >
                    查看物流信息
                </el-button>
                <!-- 已通过 -->
                <el-button
                    v-if="formData.status === 2"
                    size="medium"
                    :style="{width: '120px', marginRight: '36px'}"
                    type="primary"
                    @click="handleExportMateriel()"
                >
                    导出表格
                </el-button>
            </div>
        </div>

        <!-- 图片预览 -->
        <img-preview ref="preview" />

        <!-- 审核通过弹窗 -->
        <confirm-dialog
            ref="confirmDialog"
            :url="'http://cdn.zsdx.cn/student-app/images/dialog_logo.png'"
            :title="'审核通过提示'"
            :content="'是否确认通过改商家的物料清单审核？'"
            @confrim="confirmDialogForm"
        />

        <!-- 驳回弹窗 -->
        <refuse-dialog
            ref="refuseDialog"
            @confirm="confirmRefuseDialog"
        />

        <!-- 查看物流信息 -->
        <logistics-info
            ref="logisticsInfo"
        />

        <!-- 查看操作记录 -->
        <materiel-record
            ref="materielRecord"
            :material_no="no"
        />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
import confirmDialog from '@/components/dialog/index.vue';
import refuseDialog from '@/components/bid/refuse-dialog.vue';
import logisticsInfo from '@/components/dialog/change-logistics-dialog.vue';
import materielRecord from '@/components/bid/materiel-record.vue';
export default {
    components: {
        imgPreview,
        confirmDialog,
        refuseDialog,
        logisticsInfo,
        materielRecord
    },
    data () {
        return {
            no: '',//编号
            loading: false,
            formData: {
                status: 1,//1:已提交/待审核,2:已提交/审核通过,-1:已提交/审核驳回
            },
            material_name: '',//物料清单姓名
        };
    },
    filters: {
        filterStatus (val) {
            if(val === 1) return '待审核';
            if(val === 2) return '审核通过';
            if(val === -1) return '未通过';
        },
        filterData (val) {
            if(!val) return '--';
            return val;
        }
    },
    mounted () {
        this.loading = true;
        this.no = this.$route.query.no ? this.$route.query.no : '';
        this.material_name = this.$route.query.material_name ? this.$route.query.material_name : '';
        this.$store.commit('SET_HEADER', [{ title: "官网"},{title: '商家增值服务'},{title: '商家物料清单列表', path: '/bid/shop-materiel'},{title: '查看商家物料详情'}]);
        this.getInfo();
    },
    methods: {
        getInfo () {
            this.$post('/student/hire_room_series_material%5Cget', {
                material_no: this.no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data
                    };
                    this.$set(this.formData, 'goods_images', resp.data.goods_images.split(','));

                    setTimeout(() => {
                        this.loading = false;
                    },300);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 驳回
         */
        handleRefuseMateriel () {
            this.$refs.refuseDialog.show({
                type: 1,
                title: '物料清单不通过',
                reson: ''
            });
        },

        /**
         * 确定驳回
         */
        confirmRefuseDialog (reson) {
            this.$post('/student/hire_room_series_material%5Caudit', {
                material_no: this.no,
                action: 'reject',
                reason: reson
            }, resp => {
                if(resp.code == 1) {
                    this.getInfo();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 打开通过弹窗
         */
        handleSuccessMateriel () {
            this.$refs.confirmDialog.showDialog();
        },

        /**
         * @description 确定审核通过
         */
        confirmDialogForm () {
            this.$post('/student/hire_room_series_material%5Caudit', {
                material_no: this.no,
                action: 'pass',
                reason: ''
            }, resp => {
                if(resp.code == 1) {
                    this.getInfo();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 查看物流信息
         */
        handleCheckMateriellog () {
            this.$refs.logisticsInfo.show(this.formData.logistics_no, this.formData.tracking_no, 2);
        },

        /**
         * @description 导出表格
         */
        handleExportMateriel () {
            const Interface = '/student/hire_room_series_material%5Cexport_table';
            const base = this.$baseUrl;
            const ticket = localStorage.getItem('sessionTicket');
            const url = `${base}${Interface}?&material_no=${this.no}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * @description 修改内容
         */
        handleChangeMateriel () {
            this.$router.push({
                name: 'shopMaterielEdit',
                query: {
                    no: this.no,
                    material_name: this.material_name
                }
            });
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },
    }
};
</script>
<style lang="less" scoped>
.shopMaterielInfo {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    margin: 12px;
    overflow: hidden;
    overflow-y: auto;
    background: #ffffff;
    &::-webkit-scrollbar {
        width: 3px;
    }
    .title {
        width: 100%;
        height: 66px;
        line-height: 66px;
        box-sizing: border-box;
        padding-left: 24px;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        font-weight: 500;
    }
    ._nav {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 0 32px 0px 56px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        justify-content: space-between;
        ._nav_left {
            display: flex;
            flex-direction: column;
            // height: 40px;
            width: calc(100% - 200px);
            ._nav_status {
                font-size: 16px;
                font-weight: 500;
                height: 16px;
            }
            ._nav_reson {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                margin-top: 13px;
                // height: 13px;
                width: calc(100% - 1px);
                margin-bottom: 24px;
                line-height: 20px;
            }
        }
        ._nav_right {
            width: 92px;
            height: 26px;
            border: 1px rgba(32, 160, 255, 1) solid;
            border-radius: 13px;
            text-align: center;
            line-height: 26px;
            cursor: pointer;
            color: rgba(32, 160, 255, 1);
            font-size: 12px;
        }
    }
    ._wrap {
        width: calc(100% - 112px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 24px 0;
        margin: 0 auto;
        border-bottom: 1px rgba(233, 233, 233, 1) solid;
        ._wrap_title {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        ._item {
            display: flex;
            align-items: center;
            margin-top: 24px;
            ._item_info {
                display: flex;
                align-items: center;
                color: rgba(85, 85, 85, 1);
                font-size: 14px;
                white-space: nowrap;
                width: 335px;
                margin-right: 30px;
                ._item_content {
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    margin-left: 4px;
                    line-height: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .auto {
                width: auto;
            }
            ._item_info:last-child {
                margin-right: 0px;
            }
            .opacity0 {
                opacity: 0;
            }
            .overflow {
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        ._images {
            width: 100%;
            display: flex;
            align-items: flex-start;
            margin-top: 24px;
            ._images_title {
                color: rgba(85, 85, 85, 1);
                font-size: 14px;
                margin-right: 4px;
            }
            ._images_wrap {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                ._price {
                    width: 102px;
                    height: 102px;
                    border-radius: 4px;
                    margin-right: 12px;
                    margin-bottom: 12px;
                    cursor: pointer;
                }
            }
        }
        ._side {
            width: 100%;
            display: flex;
            margin-top: 24px;
            align-items: flex-start;
            ._side_title {
                color: rgba(85, 85, 85, 1);
                font-size: 14px;
                margin-right: 4px;
                position: relative;
                top: 5px;
            }
            ._side_content {
                width: 584px;
                height: auto;
                color: rgba(153, 153, 153, 1);
                font-size: 14px;
                line-height: 24px;
            }
        }
    }
    .padding12 {
        padding-bottom: 12px;
    }
    ._function {
        height: 36px;
        width: 100%;
        padding-left: 56px;
        box-sizing: border-box;
        margin: 32px 0 40px 0;
        display: flex;
        align-items: center;
    }
}
</style>
